<template>
  <div>
    <el-select v-model="form.media" :size="size" clearable :multiple="multiple" :collapse-tags="collapseTags" placeholder="媒体" @change="onChange">
      <el-option v-for="(item, index) in statusList" :key="index" :label="item" :value="item" />
    </el-select>
  </div>
</template>
<script>
import { GET_ALL_MEDIA } from '@/http/public'
export default {
  name: "MediaSelect",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    size: {
      type: String,
      default: 'small'
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    collapseTags:{
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      formSize: "small",
      form: {},
      statusList: [],
    };
  },
  watch: {
    value: {
      handler: function (n, o) {
        if (!n) {
          this.formInline = {};
        }
        // 多选
        if(!n){
          return false
        }
        if (this.multiple) {
          this.$set(
            this.formInline,
            "media",
            n.split(",").map((k) => Number(k))
          );
        } else {
          this.$set(this.formInline, "media", Number(n));
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取所有媒体列表
    getList() {
      GET_ALL_MEDIA().then((res) => {
        let list = res.data || [];
        this.statusList = list;
        this.$store.dispatch("common/setMediaList", list);
      });
    },

    // 监听标签选择
    onChange(e) {
      console.log(e);
      this.$emit("input", e.toString());
    },
  },
};
</script>
<style lang="scss" scoped></style>